<template>
	<view class="content">

		<view class="header">
			<view class="header-box" @click="navTo('/subpkg/message/like')">
				<view class="header-box-back">
					<image src="/static/giveb.png" mode="widthFix"></image>
					<text v-if="likeCount > 0">{{likeCount}}</text>
				</view>
				<text class="header-box-text">点赞</text>
			</view>
			<view class="header-box" @click="navTo('/subpkg/message/comment')">
				<view class="header-box-back header-box-back1">
					<image src="/static/commentb.png" mode="widthFix"></image>
					<text v-if="commentCount > 0">{{commentCount}}</text>
				</view>
				<text class="header-box-text">评论</text>
			</view>
			<view class="header-box" @click="navTo('/subpkg/message/fans')">
				<view class="header-box-back header-box-back2">
					<image src="/static/fansb.png" mode="widthFix"></image>
					<text v-if="followCount > 0">{{followCount}}</text>
				</view>
				<text class="header-box-text">粉丝</text>
			</view>
		</view>

		<view class="bodyer">
			<view class="bodyer-box" @click="navTo('/subpkg/message/notice?title=' + '系统&type=0')">
				<view class="bodyer-box-left">
					<image src="/static/inform3.png" mode="aspectFill"></image>
					<view class="bodyer-box-left-title">
						<h1>系统通知</h1>
						<text v-if="system.tips != ''">{{system.tips}}</text>
					</view>
				</view>
				<view class="bodyer-box-right">
					<text class="bodyer-box-right-time" v-if="system.time != ''">{{$util.dateUtils.format(system.time)}}</text>
					<text class="bodyer-box-right-quantity" v-if="system.count > 0">{{system.count}}</text>
				</view>
			</view>
			<view class="bodyer-box" @click="navTo('/subpkg/message/notice?title=' + '活动&type=1')">
				<view class="bodyer-box-left">
					<image src="/static/inform1.png" mode="aspectFill"></image>
					<view class="bodyer-box-left-title">
						<h1>活动通知</h1>
						<text v-if="activity.tips != ''">{{activity.tips}}</text>
					</view>
				</view>
				<view class="bodyer-box-right">
					<text class="bodyer-box-right-time" v-if="activity.time != ''">{{$util.dateUtils.format(activity.time)}}</text>
					<text class="bodyer-box-right-quantity" v-if="activity.count > 0">{{activity.count}}</text>
				</view>
			</view>
			<view class="bodyer-box" @click="navTo('/subpkg/message/notice?title=' + '门店&type=2')">
				<view class="bodyer-box-left">
					<image src="/static/inform2.png" mode="aspectFill"></image>
					<view class="bodyer-box-left-title">
						<h1>门店通知</h1>
						<text v-if="store.tips != ''">{{store.tips}}</text>
					</view>
				</view>
				<view class="bodyer-box-right">
					<text class="bodyer-box-right-time" v-if="store.time != ''">{{$util.dateUtils.format(store.time)}}</text>
					<text class="bodyer-box-right-quantity" v-if="store.count > 0">{{store.count}}</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapActions,
		mapMutations,
		mapGetters
	} from 'vuex';
	import {
		unreadCount
	} from '@/api/message.js'
	export default {
		data() {
			return {
				likeCount: 0,
				commentCount: 0,
				followCount: 0,
				system: {
					count: 0,
					time:"",
					tips: ""
				},
				activity: {
					count: 0,
					time:"",
					tips: ""
				},
				store: {
					count: 0,
					time:"",
					tips: ""
				}
			};
		},
		onShow() {
			if(this.isLogin){
				this.unreadCount();
			}
		},
		computed: {
			...mapGetters('m_user', ['token', 'isLogin'])
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			unreadCount() {
				let that = this;
				unreadCount().then(res => {
					that.likeCount = res.data.likeCount;
					that.commentCount = res.data.commentCount;
					that.followCount = res.data.followCount;
					
					that.system = res.data.system;
					that.activity = res.data.activity;
					that.store = res.data.store;
				})
			}
		}
	}
</script>

<style lang='scss'>
	.header {
		height: 220rpx;
		background-color: #fff;
		box-sizing: border-box;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-bottom: 1rpx solid #f1f1f1;

		.header-box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.header-box-back1 {
				background-color: rgba(54, 182, 126, 1) !important;
			}

			.header-box-back2 {
				background-color: rgba(255, 163, 36, 1) !important;
			}

			.header-box-back {
				position: relative;
				width: 98rpx;
				height: 98rpx;
				border-radius: 50%;
				background-color: rgba(255, 101, 66, 1);
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 15rpx;

				image {
					width: 42rpx;
				}

				text {
					position: absolute;
					right: -5rpx;
					top: -5rpx;
					width: 28rpx;
					height: 28rpx;
					background-color: rgba(255, 101, 66, 1);
					border: 3rpx solid rgba(255, 255, 255, 1);
					border-radius: 50%;
					font-size: 20rpx;
					text-align: center;
					line-height: 28rpx;
					color: #fff;
				}

			}

			.header-box-text {
				font-size: 30rpx;
			}
		}
	}

	.bodyer {
		padding: 0 24rpx;

		.bodyer-box {
			height: 98rpx;
			padding: 40rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #f1f1f1;

			.bodyer-box-left {
				display: flex;

				image {
					width: 98rpx;
					height: 98rpx;
					border-radius: 50%;
				}

				.bodyer-box-left-title {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					margin-left: 20rpx;

					h1 {
						font-size: 34rpx;
						color: rgba(61, 61, 61, 1);
					}

					text {
						font-size: 26rpx;
						color: rgba(61, 61, 61, 0.6);
					}
				}
			}

			.bodyer-box-right {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: flex-end;

				.bodyer-box-right-time {
					font-size: 26rpx;
					color: rgba(61, 61, 61, 0.6);
				}

				.bodyer-box-right-quantity {
					width: 28rpx;
					height: 28rpx;
					background-color: rgba(255, 101, 66, 1);
					border: 3rpx solid rgba(255, 255, 255, 1);
					border-radius: 50%;
					font-size: 20rpx;
					text-align: center;
					line-height: 28rpx;
					color: #fff;
				}
			}
		}
	}
</style>
